<template>
  <div class="ml-30">
    <div class="echarts">
      <ECharts :option="option" :resize="false" />
    </div>
  </div>
</template>
<script setup lang="ts">
import ECharts from "@/components/ECharts/index.vue";
import { ECOption } from "@/components/ECharts/config";
import { mpdsType } from "@/api/modules/home";
import { onMounted, ref } from "vue";

onMounted(() => {
  getMpdsType();
});
const getMpdsType = async () => {
  let { data } = await mpdsType();
  option.value.series = [
    {
      type: "pie",
      roseType: "radius",
      radius: ["25%", "60%"],
      center: ["48%", "50%"],
      data: data,
      // hoverAnimation: false,
      itemStyle: {
        borderColor: "none",
        borderWidth: 2
      },
      labelLine: {
        length: 20,
        length2: 80,
        lineStyle: {
          // color: '#e6e6e6'
        }
      },
      label: {
        formatter: params => {
          return params.name + "\n{value|" + formatNumber(params.value) + "}";
        },
        padding: [25, -20, 25, -20],
        rich: {
          name: {
            fontSize: 18,
            padding: [0, 0, 0, 10],
            color: "#fff"
          },
          value: {
            fontSize: 14,
            fontWeight: "bolder",
            padding: [10, 0, 0, 20],
            color: "inherit"
            // color: '#333333'
          }
        }
      }
    }
  ];
};
let color = ["#f24573", "#fc816a", "#3ac3f6", "#fffe95", "#ffcc5e", "#37e5fa"];

let formatNumber = function (num) {
  let reg = /(?=(\B)(\d{3})+$)/g;
  return num.toString().replace(reg, ",");
};

const option = ref<ECOption>({
  color: color,
  tooltip: {
    trigger: "item"
  },
  legend: {
    itemHeight: 10,
    itemWidth: 20,
    icon: "rect",
    bottom: 0,
    left: 0,
    itemGap: 20,
    padding: [0, 0, 0, 80],
    textStyle: {
      color: "#fff",
      // verticalAlign: "middle",
      rich: {
        name: {
          width: 180,
          fontSize: 16
        },
        value: {
          width: 120,
          align: "right",
          fontFamily: "Medium",
          fontSize: 16
        },
        rate: {
          width: 100,
          align: "right",
          fontSize: 16
        }
      }
    }
    // data: echartData
    // formatter: name => {
    //   if (echartData.length) {
    //     const item = echartData.filter(item => item.name === name)[0];
    //     return `{name|${name}}{value| ${item.value}}`;
    //   }
    // }
  }
});
</script>
<style scoped lang="scss">
.echarts {
  width: 100%;
  height: 270px;
}
</style>
